<template>
  <div id="register">
    <div class="title">
      <h1>数 字 鸽 业 精 准 管 控 云 服 务 平 台</h1>
    </div>
    <div class="lxl-login">
      <el-card class="box-card">
        <div class="lxl-title">
          <p style="font-size: 23px; margin:5px 0px 25px ">注 册 页 面</p>
        </div>
        <div class="lxl-form">
          <Form
            :callback="handleSubmit"
            :options="['phone', 'password', 'confirmPassword', 'code']"
            button="注 册"
          ></Form>
        </div>
        <div style="display: flex; justify-content: flex-end">
          <router-link to="/login" style="font-size:14px">登录</router-link>
          <el-divider direction="vertical"></el-divider>
          <router-link to="/forgetPassword" style="font-size:14px">忘记密码 ？</router-link>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {Register} from "../../Api/login/index"
import Form from "../../components/Login/Form"
export default {
  components:{
    Form,
  },
  props:{

  },
  data() {
    return {
      
    };
  },
  methods:{
      async handleSubmit(form){
        let {code,password,phone} = form;
        const {data :res,headers} = await Register({code,password,phone})
        console.log("注册结果",res)
        if(res.statusCode === 20000){
        localStorage.setItem("token", headers.token);
        this.$message.success(res.message)
        this.$router.push("/judge");
        }else{
          if(res.message === "该手机号已被使用"){
            this.$message.success("该手机号已注册，请前往登录")
            this.$router.push("/login");
          }
        console.error(res.message);
         }
     } 
  },

}
</script>
<style lang="scss" scoped>
#register {
  height: 100%;
  padding: 0;
  font-family: sans-serif;
  background: url("../../assets/image/login.jpg");
  background-size: cover;
}
  .title{
     position: absolute;
     top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  h1 {
      margin: 0 0 30px;
      padding: 0;
      color: rgb(251, 249, 249);
      text-align: center;
      font-size: 40px;
    }

/deep/.lxl-login {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-form {
      .el-form-item {
        .login {
        margin-top: 10px;
        margin-left: -40px;
          width: 105%;
          height: 38px;
          font-size: 18px;
          }
        }
    }
}

.box-card {

  background-color: rgba(255, 255, 255, 0.815);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 2%;
}
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
.lxl-title {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  color: rgba(56, 54, 54, 0.877);
}

</style>